<template>
  <div class="about">
    <at-button v-if="debug" @click="showData(chartData)">
      <i class="icon icon-align-center" /> this page data
    </at-button>
    <div id="myChart251" :style="{width: '800px', height: '550px'}"></div>
     <input
      class="hdbtn"
      type="button"
      id="btn888"
      @click="downloadImpByChart()"
      value="保存为图片"
    />
    <!-- {{chartData}} -->
  </div>
</template>
<style scoped>
</style>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "hello",
  data() {
    return {
      chartData: {},
      names: [],
      dataEG: [],
      dataPass: [],
      maxValue: 100
    };
  },
  computed: {
    ...mapState(['cookies','debug'])
  },
  mounted() {
    this.updateCookies();
    this.chartData = this.cookies.chart25;
    
    this.chartData.dataEG.forEach((item, index) => {
      this.names.push({
        name: item.name,
        max: this.maxValue
      });
      this.dataEG[index] = item.value;
    });

    this.chartData.dataPass.forEach((item, index) => {
      this.dataPass[index] = item.value;
    });

    // alert(this.chartData)
    this.drawLine();
  },
  methods: {
    ...mapMutations(["updateCookies"]),
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart251 = this.$echarts.init(document.getElementById("myChart251"));

      var option = {
        // backgroundColor: "#0A2E5D",
        normal: {
          top: 300,
          left: 300,
          width: 600,
          height: 500,
          zIndex: 6
          // backgroundColor: "#0A2E5D"
        },
        color: ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
        title: {
          show: true,
          text: this.chartData.title,
          // left: "30%",
          x:'center',
          top: "0%",
          textStyle: {
            fontSize:'26',
            fontFamily:'FZXBSJW',
            // color: "#0A2E5D",
            // fontStyle: "normal",
            // fontWeight: "normal"
          }
        },
        grid:{
          left:'0%',
          top:'5%'
        },
        tooltip: {
          show: true,
          trigger: "item",
          // formatter: "{c}%"
        },
        legend: {
          show: true,
          icon: "circle",
          left: "35%",
          top: "95%",
          orient: "horizontal",
          textStyle: {
            fontSize: 14,
            color: "#0A2E5D"
          },
          data: ["优秀良好率(%)", "合格率(%)"]
        },
        radar: {
          center: ["50%", "50%"],
          radius: "76%",
          startAngle: 45,
          splitNumber: 4,
          shape: "circle",
          splitArea: {
            areaStyle: {
              color: ["transparent"]
            }
          },
          axisLabel: {
            // show: true,
            fontSize: 8,
            color: "#0A2E5D",
            fontStyle: "normal",
            fontWeight: "normal"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#0A2E5D" //
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0A2E5D" //
            }
          },
          indicator: this.names
        },
        series: [
          {
            name: "优秀良好率(%)",
            type: "radar",
            symbol: "circle",
            symbolSize: 10,
            label:{
              show:true,
              formatter: "{c}"
              },
            areaStyle: {
              normal: {
                color: "rgba(245, 166, 35, 0.4)"
              }
            },
            itemStyle: {
              color: "rgba(245, 166, 35, 1)",
              borderColor: "rgba(245, 166, 35, 0.3)",
              borderWidth: 0
            },
            lineStyle: {
              normal: {
                type: "dashed",
                color: "rgba(245, 166, 35, 1)",
                width: 2
              }
            },
            data: [this.dataEG]
          },
          {
            name: "合格率(%)",
            type: "radar",
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: "rgba(19, 173, 255, 1)",
                borderColor: "rgba(19, 173, 255, 0.4)",
                // borderWidth: 10
              }
            },
            label:{show:true,formatter: "{c}"},
            areaStyle: {
              normal: {
                color: "rgba(19, 173, 255, 0.5)"
              }
            },
            lineStyle: {
              normal: {
                color: "rgba(19, 173, 255, 1)",
                width: 2,
                // type: "dashed"
              }
            },
            data: [this.dataPass]
          }
        ]
      };

      // 绘制图表
      myChart251.setOption(option);
    },
    showData(jsondata) {
      this.$Modal.alert({ content: jsondata });
    },

    downloadImpByChart(){
      this.common.saveChart(this.$echarts.getInstanceByDom(document.getElementById('myChart251')),this.cookies.chart25.title)
    }
  }
};
</script>
<style scoped>
.about {
 padding-top: 2rem;
}

#myChart251 {
  margin: 0 auto;
}
</style>